<template>
  <div id="app">
    <!-- 导航栏 -->
    <nav class="nav">
      <a v-for="link in navLinks" :key="link.id" @click.prevent="scrollToSection(link.id)" href="#">
        {{ link.label }}
      </a>
    </nav>

    <div class="container">
      <header class="header">
        <h1 class="title">清泓智巡 - 水质检测系统</h1>
      </header>
      <main class="main">
        <!-- 关于项目 -->
        <section id="about" class="card about-card content-section">
          <h2>关于项目</h2>
          <hr>
          <p>
            "清泓智巡"多功能环境检测船是利用多种传感器检测水质及水域周围空气污染物的智能设备，可以方便地找出污染源，并配备了无线图传系统，将水面及水下的图像实时传输至控制端。
          </p>
          <p>
            该设备由学生团队自主研发，集成了水质检测、空气监测、GPS定位、太阳能供电等多项功能，实现了环境监测的智能化和节能减排。
          </p>
        </section>

        <!-- 核心技术 -->
        <section id="products" class="card feature-card-container content-section">
          <h2>核心技术</h2>
          <hr>
          <div class="feature-cards">
            <div class="feature-card">
              <h3>多传感器集成</h3>
              <p>集成PH电极、浊度、电导率、水温、一氧化碳、乙醇、烟雾、氨气等多种传感器，实现对水域水质的全面分析。</p>
            </div>
            <div class="feature-card">
              <h3>双工无线通信</h3>
              <p>使用NRF24L01+ 2.4G无线模块进行信息的双向通信，传感器数据实时传送至遥控器，准确展示水质和空气质量情况。</p>
            </div>
            <div class="feature-card">
              <h3>实时图像传输</h3>
              <p>5.8G无线图传模块实时回传图像信息，500线防水170度广角摄像头，防护等级IP67，让操作者直观观察水面及水下环境。</p>
            </div>
            <div class="feature-card">
              <h3>精准定位系统</h3>
              <p>GPS+GPRS模块精确定位，可将位置信息发送至指定网站，便于快速找出并确定污染源位置。</p>
            </div>
            <div class="feature-card">
              <h3>水样采集系统</h3>
              <p>船体装载水泵，可采集指定水域水样，用于进一步分析水中的微量元素及微生物。</p>
            </div>
          </div>
        </section>

        <!-- 创新点 -->
        <section id="innovations" class="card benefit-card content-section">
          <h2>创新点</h2>
          <hr>
          <ul>
            <li><strong>无线通信系统：</strong>NRF24L01+双向通信，遥控器端与船体间进行实时数据交换，通信距离可达2200米。</li>
            <li><strong>太阳能供电：</strong>船身装有太阳能电池板，为连续工作提供保障，使用清洁能源减少排放。</li>
            <li><strong>无线充电：</strong>船体及遥控器搭载无线充电系统，转换效率62.5%，实现零排放充电。</li>
            <li><strong>智能检测：</strong>PH测量电路及液体浊度传感器设计，MQ系列空气质量传感器数据解算。</li>
            <li><strong>低成本高效：</strong>整套系统成本仅为2000元，维护成本低，适合大规模推广。</li>
          </ul>
        </section>

        <!-- 高德地图容器 -->
        <section id="map" class="card map-card content-section">
          <h2>地图实例</h2>
          <hr>
          <div id="map-container" style="width: 100%; height: 600px;"></div>
          <div class="map-overlay">
            <p>实时监测水域水质数据，精确定位污染源位置</p>
          </div>
        </section>

        <!-- 联系我们 -->
        <section id="contact" class="content-section">
          <h2>联系我们</h2>
          <p>邮箱：2782907988@qq.com</p>
          <p>电话：15713740597</p>
        </section>
      </main>
      <footer class="footer">
        <p>版权所有 ©  "天眼号"项目组</p>
      </footer>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const navLinks = ref([
  { id: 'about', label: '关于项目' },
  { id: 'products', label: '核心技术' },
  { id: 'innovations', label: '创新点' },
  { id: 'map', label: '水质检测' },
  { id: 'contact', label: '联系我们' }
]);

const scrollToSection = (sectionId) => {
  const element = document.getElementById(sectionId);
  if (element) {
    element.scrollIntoView({
      behavior: 'smooth'
    });
  }
};

onMounted(() => {
  const script = document.createElement('script');
  script.src = `https://webapi.amap.com/maps?v=2.0&key=a4e63bbdec2133370f2d80232df16e10&plugin=AMap.Geolocation`;
  script.onload = () => {
    console.log('高德地图 API 加载成功');
    if (typeof AMap !== 'undefined') {
      initMap();
    } else {
      console.error('AMap 对象未定义');
    }
  };
  script.onerror = () => {
    console.error('高德地图 API 加载失败');
  };
  document.head.appendChild(script);
});

function initMap() {
  let map;
  let geolocation;

  // 创建地图实例
  map = new AMap.Map('map-container', {
    zoom: 15,
    viewMode: '3D',
    pitch: 50,
    rotation: -15,
    mapStyle: 'amap://styles/light',
    features: ['bg', 'road', 'building']
  });

  // 添加地理定位控件
  geolocation = new AMap.Geolocation({
    enableHighAccuracy: true,
    timeout: 10000,
    buttonPosition: 'RB',
    buttonOffset: new AMap.Pixel(10, 20),
    zoomToAccuracy: true,
  });
  map.addControl(geolocation);

  // 获取当前位置
  geolocation.getCurrentPosition((status, result) => {
    if (status === 'complete') {
      console.log('定位成功', result);
      const userLocation = [result.position.lng, result.position.lat];
      map.setCenter(userLocation);

      // 添加用户位置标记
      new AMap.Marker({
        position: userLocation,
        map: map,
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        title: '您的位置'
      });

      // 模拟添加检测点
      addDetectionPoints(userLocation);
    }
  });

  // 添加地图控件
  map.addControl(new AMap.ControlBar({
    showZoomBar: true,
    showControlButton: true,
    position: { right: '10px', top: '10px' }
  }));
}

function addDetectionPoints(center) {
  // 模拟添加水质检测点
  const colors = ['#1E90FF', '#32CD32', '#FFD700', '#FF4500', '#8B0000']
  
  for (let i = 0; i < 5; i++) {
    const lng = center[0] + (Math.random() * 0.01 - 0.005)
    const lat = center[1] + (Math.random() * 0.01 - 0.005)
    
    new AMap.Marker({
      position: [lng, lat],
      map: map,
      icon: `https://webapi.amap.com/theme/v1.3/markers/n/mark_${'bgr'[i%3]}.png`,
      title: `水质检测点 ${i+1}`,
      extData: {
        ph: (6 + Math.random() * 3).toFixed(1),
        turbidity: (10 + Math.random() * 50).toFixed(0),
        temperature: (15 + Math.random() * 15).toFixed(1)
      }
    })
  }
}
</script>

<style scoped lang="scss">
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f9fc;
  color: #333;
  scroll-behavior: smooth;
}

.nav {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  background-color: #1a3a6e;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 10px 30px;
  border-bottom-left-radius: 12px;
  z-index: 1000;
}

.nav a {
  margin: 0 15px;
  color: #ecf0f1;
  text-decoration: none;
  transition: all 0.3s;
  line-height: 2.5;
  font-weight: 500;
  padding: 5px 0;
  position: relative;
}

.nav a:hover {
  color: #4fc3f7;
}

.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #4fc3f7;
  transition: width 0.3s;
}

.nav a:hover::after {
  width: 100%;
}

.container {
  font-family: 'Arial', sans-serif;
  margin: 0 auto;
  max-width: 1400px;
  background-color: #f5f9fc;
  padding-top: 70px;
}

.header {
  background: linear-gradient(135deg, #1a3a6e 0%, #0d8abc 100%);
  color: white;
  text-align: center;
  padding: 40px 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0;
  font-size: 2.5em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.main {
  padding: 20px;
}

.about-card {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  width: 100%;
  background-color: #ffffff;
  padding: 30px;
  margin-bottom: 30px;

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  }

  p {
    line-height: 1.8;
    margin-bottom: 15px;
  }
}

.card {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
  background-color: #ffffff;
  padding: 30px;
  margin-bottom: 30px;

  h2,
  h3 {
    color: #1a3a6e;
    text-align: center;
    margin-bottom: 15px;
  }

  hr {
    width: 80px;
    margin: 15px auto;
    border: none;
    border-bottom: 2px solid #4fc3f7;
  }

  p,
  ul {
    color: #555;
    line-height: 1.8;
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  }
}

.feature-card-container {
  flex-grow: 2;
  min-width: 60%;
}

.benefit-card {
  flex-grow: 1;
  min-width: 35%;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.feature-card {
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  padding: 25px;
  background-color: #f8fafc;
  transition: all 0.3s ease;
  border-left: 4px solid #4fc3f7;

  h3 {
    color: #1a3a6e;
    margin-bottom: 15px;
    text-align: left;
  }

  p {
    color: #666;
    line-height: 1.6;
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 15px;
  padding-left: 25px;
  position: relative;
  line-height: 1.6;
}

li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #4fc3f7;
  font-weight: bold;
}

strong {
  color: #1a3a6e;
}

.footer {
  background: linear-gradient(135deg, #1a3a6e 0%, #0d8abc 100%);
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: 50px;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
}

.map-card {
  margin-top: 30px;
  position: relative;
}

.map-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-color: rgba(26, 58, 110, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  z-index: 10;
  max-width: 300px;
}

.content-section {
  margin: 3em auto;
  transition: transform 0.3s ease;
}

.content-section:hover {
  transform: translateY(-5px);
}

@media (max-width: 768px) {
  .nav {
    padding: 10px 15px;
    width: 100%;
    justify-content: center;
    border-radius: 0;
  }
  
  .nav a {
    margin: 0 10px;
    font-size: 0.9em;
  }
  
  .title {
    font-size: 1.8em;
  }
  
  .feature-cards {
    grid-template-columns: 1fr;
  }
  
  .map-overlay {
    max-width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
  }
}
</style>